
<template>
  <div class="container">
    <!-- <el-drawer :before-close="handleClose1" :with-header="false" :visible.sync="Drawer" direction="rtl" size="20%"> -->
    <el-drawer
      :before-close="handleClose1"
      :with-header="false"
      :visible="Drawer"
      direction="rtl"
      size="20%"
    >
      <div class="exit" @click="loginOut">
        <i class="iconfont icon-zhuxiaoicon"></i>
        <span class="textName">注销</span>
      </div>
      <div class="photo_box">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :httpRequest="httpRequest"
          :before-upload="beforeAvatarUpload"
        >
          <div class="ava_img">
            <img :src="imageUrl" class="avatar" />
          </div>
          <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
        </el-upload>
        <!-- <div class="ava_img">
                <img src="@/assets/icon/morentouxiang.svg" />
            </div> -->
        <p>{{ userName }}</p>
      </div>
      <div class="setList active">
        <el-dropdown trigger="click" @command="accountChange1">
          <div>
            <i class="iconfont icon-rig_icon1" style="color: #5083f3"></i>
            <span>账号设置</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="info">个人信息</el-dropdown-item>
            <el-dropdown-item command="security">账户安全</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="setList">
        <i class="iconfont icon-rig_icon2" style="color: #8e63e4"></i>
        <span>技术文档</span>
      </div>
      <div class="setList" @click="noticeToShow">
        <i class="iconfont icon-rig_icon3" style="color: #19d284"></i>
        <span>帮助与反馈</span>
      </div>
      <div class="setList" @click="downPPM">
        <i class="iconfont icon-rig_icon4" style="color: #fab846"></i>
        <span>关于 PMS</span>
      </div>
    </el-drawer>
    <notice v-if="noticeShow" :maskShowClick="maskShowClick"></notice>
  </div>
</template>

<script>
// import Cookies from 'js-cookie';
import notice from "./notice.vue";

export default {
  name: "settings",
  components: {
    notice,
  },
  props: {
    Drawer: {
      type: Boolean,
      default: false,
    },
    stateInit: {
      type: Function,
    },
    accountChange: {
      type: Function,
    },
  },
  data() {
    return {
      noticeShow: false,
      userName: sessionStorage.getItem("userName"),
      imageUrl:
        sessionStorage.getItem("avatar") != "null"
          ? sessionStorage.getItem("avatar")
          : require("@/assets/icon/morentouxiang.svg"),
    };
  },
  created() {},
  methods: {
    //打开消息界面
    noticeToShow() {
      this.noticeShow = true;
    },
    //关闭消息界面
    maskShowClick() {
      this.noticeShow = false;
    },
    httpRequest(para) {
      this.$notify.info({
        title: "提示",
        message: "头像正在上传",
      });
      let FormDatas = new FormData();
      FormDatas.append("fileArray", para.file);
      FormDatas.append("accNo", sessionStorage.getItem("accNo")); //文件夹名称
      this.$http
        .post(
          `/${this.$ServiceName}/api/external/protected/file/uploadAvatar`,
          FormDatas
        )
        .then((res) => {
          if (res.data.code != "0000") {
            return this.$message.error(res.data.msg);
          }
          this.imageUrl = `${res.data.data}`;
          console.log(res, "res");
          this.$notify.success({
            title: "成功",
            message: "头像上传成功",
          });
          window.sessionStorage.setItem("avatar", this.imageUrl);
          this.$emit("updateAvatar");
        })
        .catch((error) => {});
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 < 100;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 100KB!");
      }
      return isJPG && isLt2M;
    },
    async downPPM() {
      await this.$http
        .get(
          `/${this.$ServiceName}/api/external/protected/file/down?id=1295637936234172416`,
          { timeout: 1000 * 60 * 5 },
          {
            responseType: "arraybuffer",
            params: {
              token: window.sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          const content = res.data;
          const blob = new Blob([content]); // 构造一个blob对象来处理数据
          const link = document.createElement("a"); // 创建a标签
          link.download = "散杂货生产管理云平台（ppm）操作手册v1.1.docx"; // a标签添加属性
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          document.body.appendChild(link);
          link.click(); // 执行下载
          URL.revokeObjectURL(link.href); // 释放url
          document.body.removeChild(link); // 释放标签
        })
        .catch((error) => {});
    },
    handleClose1(done) {
      done();
      this.stateInit();
    },
    async loginOut() {
      await this.$http
        .get(`/${this.$ServiceName}/api/external/logout`)
        .then((res) => {
          sessionStorage.removeItem("token");
          sessionStorage.removeItem("TagList");
          this.$router.push("/login");
          this.stateInit();
        })
        .catch((error) => {});
    },
    accountChange1(command) {
      this.accountChange(command);
    },
  },
};
</script>

<style lang="less" scoped>
.exit {
  width: 100%;
  height: 20px;
  line-height: 20px;
  box-sizing: border-box;
  margin: 24px 0;
  cursor: pointer;
  color: #338ce8;
  font-size: 14px;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;

  .textName {
    margin-left: 8px;
  }
}

.photo_box {
  height: 120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .ava_img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 17px;
    overflow: hidden;
    cursor: pointer;

    img {
      width: 100%;
    }

    p {
      font-size: 16px;
      color: #303133;
    }
  }
}

.setList {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 31px;
  cursor: pointer;

  &:hover {
    background: #f5f7fa;
  }

  span {
    margin-left: 13px;
    font-size: 14px;
    color: #606266;
  }
}

// headstyle
.headstyle {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  width: 100% !important;
  background: #2979c8;
  padding: 0 20px;
  box-sizing: border-box;

  .title_iocn {
    cursor: pointer;

    i {
      color: #fff;
    }

    .line {
      border: 1px solid #c9dbf0;
      height: 14px;
      margin: 0 13px;
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
      letter-spacing: -0.5px;
    }
  }
}

.el-header {
  .compzzz {
    display: flex;
    width: 115px;
  }

  .icon {
    color: #ffffff;
    padding: 0 11px;
    height: 50px;
    line-height: 50px;
    border-radius: 2px;
  }

  .icon:hover,
  .compzzz:hover {
    background-color: #1d4b7c;
  }

  p {
    font-size: 12px;
  }
}
</style>
